<template>
  <div>
    <basic-modal :modalOpt="modal" :footer="undefined" :buttonText="['','完成']" @closeModal="closeModal">
      <template>
        <a-transfer
        :data-source="leftData"
        :target-keys="rightData"
        :show-search="true"
        :disabled="false"
        :listStyle="listStyle"
        :titles="['待推送产品','已推送产品']"
        :filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
        :show-select-all="false"
        @change="onChange"
        >
            <template
                slot="children"
                slot-scope="{
                props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
                on: { itemSelectAll, itemSelect },
                }"
            >
                <div class="childTable" ref="childTable">
                  <a-table
                    :row-selection="getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })"
                    :columns="direction === 'left' ? leftColumns : rightColumns"
                    :data-source="filteredItems"
                    size="small"
                    :scroll="{y:'49vh'}"
                    :pagination="direction === 'left' ?paginationView:paginationViewR"
                    @change="(pagination, filters, sorter)=>handleTableChange(pagination, filters, sorter,direction)"
                    :loading="loading"
                    :style="{ pointerEvents: listDisabled ? 'none' : null }"
                    :custom-row="({ key, disabled: itemDisabled }) => ({
                        on: {
                            click: () => {
                            if (itemDisabled || listDisabled) return;
                            itemSelect(key, !selectedKeys.includes(key));
                            },
                        },
                    })"
                    />
                </div>
            </template>
        </a-transfer>
        
      </template>
    </basic-modal>
  </div>
</template>

<script>
import basicModal from '@/views/app/biz/common/basicModal'
import SupplierSelect from '@/views/app/biz/supplier/SupplierSelect'
import {
  getByAreaUse,
  getByAreaUseCount,
  getPushedGoods,
  pushGoods,
} from './purchasedgoods'
import difference from 'lodash/difference';
export default {
  components: {
    basicModal,
    SupplierSelect
  },
  data() {
    return {
      loading: false,
      modal: {
        modalVisible: false,
        modalTitle: '推送商品',
        modalWidth: '90vw',
        maxHeight:'78vh',
      },
      paginationView: {
        //分页配置
        current: 1, //当前页码 current
        pageSize: 100, //每页显示条数 pageSize
        total: 1,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['10', '50','100', '500'],
      },
      paginationViewR: {
        //分页配置
        current: 1, //当前页码 current
        pageSize: 100, //每页显示条数 pageSize
        total: 1,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['5', '50','100', '200'],
      },
      pagination: {
        //分页配置
        current: 1, //当前页码 current
        pageSize: 1000000, //每页显示条数 pageSize
      },
      q_formDatas:{
          pid:null
      },
      q_formDatasR:{
          supplierOrgCode:null
      },
      supplierOrgCode:null,
      regInfo:{},
      listStyle:{height:'70vh',overflow:'scroll',width:'50%'},
      orgListdata:[],
      //左边数据
      leftData:[],
      //右边数据
      rightData: [],
      leftColumns: [
        { title: '品名', dataIndex: 'productNameZh', key: 'productNameZh', align: 'center' },
        { title: '编码', dataIndex: 'standardCode', key: 'standardCode', align: 'center' },
        { title: '规格', dataIndex: 'spec', key: 'spec', align: 'center' },
      ],
      rightColumns: [
        { title: '品名', dataIndex: 'productNameZh', key: 'productNameZh', align: 'center' },
        { title: '编码', dataIndex: 'standardCode', key: 'standardCode', align: 'center' },
        { title: '规格', dataIndex: 'spec', key: 'spec', align: 'center' },
      ],
      checked1:false,
      checked2:false,
    }
  },
  computed: {},
  watch:{
    leftData:{
      handler(val,oldVal){
        this.paginationView.total=val.length
        this.paginationView={...this.paginationView}
      },
      deep:true,
      immediate:true
    },
    rightData:{
      handler(val,oldVal){
        this.paginationViewR.total=val.length
        this.paginationViewR={...this.paginationViewR}
      },
      deep:true,
      immediate:true
    }
  },
  mounted() {
    
  },
  methods: {
    // 点击了推送产品 
    matchAllModal(record) {
      //record供应商信息
      this.supplierOrgCode=record.gongYingsdm
      this.leftData=[]
      this.rightData=[]
      this.orgListdata=[]
      this.getList()
      this.modal.modalVisible = true
      this.modal.modalTitle = "推送商品"
      
      
    },
    // 关闭模态详细框
    closeModal() {
      this.modal.modalVisible = false
      // this.$emit('close')
      //关闭时刷新
      this.$emit('ok')
    },
    // 保存成功关闭模态详细框
    closeModal2() {
      this.modal.modalVisible = false
      this.$emit('ok')
    },
    // 触发改变页码,筛选,排序时的回调
    handleTableChange(pagination, filters, sorter,direction) {
      console.log(direction);
      if (direction=='left') {
        this.paginationView.current = pagination.current
        this.paginationView.pageSize = pagination.pageSize
        this.paginationView={...this.paginationView}
      }else if(direction=='right'){
        this.paginationViewR.current = pagination.current
        this.paginationViewR.pageSize = pagination.pageSize
        this.paginationViewR={...this.paginationViewR}
      }
      
    },
    async getList() {
      this.loading = true
      let listdata = []
      let res = ''
      this.getRightList()
      res = await getByAreaUse(this.q_formDatas, this.pagination)
      this.loading = false
      console.log(this.q_formDatas)
      console.log(res)
      if (res && res.code && res.code === 'C1' && res.data) {
        const resdata = res.data
        for (let item of resdata) {
            listdata.push({
                key: item.standardCode,
                title: item.productNameZh,
                productNameZh: item.productNameZh,
                standardCode: item.standardCode,
                spec:item.spec
            })
        }
        this.leftData =listdata
        this.orgListdata=res.data
        this.paginationView.total=this.leftData.length
      } else {
        this.leftData = []
        this.orgListdata=[]
      }

    },
    async getRightList() {
      this.q_formDatasR.supplierOrgCode=this.supplierOrgCode
      let params={
        ...this.q_formDatasR
      }
      let listdata=[]
      console.log(params);
      let res = await getPushedGoods(params, this.pagination)
      console.log('right------',res);
      if (res && res.code && res.code === 'C1' && res.data) {
        const resdata = res.data
        for (let item of resdata) {
            listdata.push(item.standardCode)
        }
        this.rightData=listdata
      } else {
        this.rightData=[]
      }
    },
    onChange(targetKeys, direction, moveKeys) {
      if (direction=='left') {
        this.$message.warning({content:'不能取消推送'})
        return
      }
      let sbdata={
          purPodPids:'',
          supplierOrgCode:this.supplierOrgCode
      }
        
      for (let item of moveKeys) {
        sbdata.purPodPids+=item+','
      }

      
      this.saveObjInfo(sbdata)
      
    },
    async saveObjInfo(val) {
      this.loading = true
      let key = 'gxgjm'
      this.$message.loading({ content: '提交中',key,duration:0 })
      console.log(val);
      let res = await pushGoods(val)
      this.loading = false
      console.log(res)
      if (res && res.code && res.code === 'C1' && res.data) {
        this.$message.success({ content: '推送成功',key,  duration: 2 })
        this.getList()
        this.getRightList()
      } else {
        this.$message.error({ content: '推送失败',key,  duration: 2 })
      }
    },
    getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
      return {
        getCheckboxProps: item => ({ props: { disabled: disabled || item.disabled } }),
        onSelectAll(selected, selectedRows) {
          const treeSelectedKeys = selectedRows
            .filter(item => !item.disabled)
            .map(({ key }) => key);
          const diffKeys = selected
            ? difference(treeSelectedKeys, selectedKeys)
            : difference(selectedKeys, treeSelectedKeys);
          itemSelectAll(diffKeys, selected);
        },
        onSelect({ key }, selected) {
          itemSelect(key, selected);
        },
        selectedRowKeys: selectedKeys,
      };
    },

    
  },
}
</script>

<style>
.childTable{
  height: 100%;
  width: 100%;
}
</style>